      <!-- Control Sidebar -->      
      <aside class="control-sidebar control-sidebar-light">                
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
          <li class="active"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane active" id="control-sidebar-settings-tab">
<ul class="list-unstyled clearfix">
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:void(0);" data-skin="skin-blue" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<div><span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span>
			</div>
			<div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
			</div>
		</a>
		<p class="text-center no-margin">蓝-黑</p>
	</li>
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:void(0);" data-skin="skin-black" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span>
			</div>
			<div><span style="display:block; width: 20%; float: left; height: 20px; background: #222;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
			</div>
		</a>
		<p class="text-center no-margin">白-黑</p>
	</li>
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:void(0);" data-skin="skin-purple" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span>
			</div>
			<div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
			</div>
		</a>
		<p class="text-center no-margin">紫-黑</p>
	</li>
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:void(0);" data-skin="skin-green" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span>
			</div>
			<div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
			</div>
		</a>
		<p class="text-center no-margin">绿-黑</p>
	</li>
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:void(0);" data-skin="skin-red" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span>
			</div>
			<div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
			</div>
		</a>
		<p class="text-center no-margin">红-黑</p>
	</li>
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:void(0);" data-skin="skin-yellow" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span>
			</div>
			<div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
			</div>
		</a>
		<p class="text-center no-margin">黄-黑</p>
	</li>
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:void(0);" data-skin="skin-blue-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<div><span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span>
			</div>
			<div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
			</div>
		</a>
		<p class="text-center no-margin" style="font-size: 12px">蓝-白</p>
	</li>
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:void(0);" data-skin="skin-black-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span>
			</div>
			<div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
			</div>
		</a>
		<p class="text-center no-margin" style="font-size: 12px">白-白</p>
	</li>
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:void(0);" data-skin="skin-purple-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span>
			</div>
			<div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
			</div>
		</a>
		<p class="text-center no-margin" style="font-size: 12px">紫-白</p>
	</li>
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:void(0);" data-skin="skin-green-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span>
			</div>
			<div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
			</div>
		</a>
		<p class="text-center no-margin" style="font-size: 12px">绿-白</p>
	</li>
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:void(0);" data-skin="skin-red-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span>
			</div>
			<div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
			</div>
		</a>
		<p class="text-center no-margin" style="font-size: 12px">红-白</p>
	</li>
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:void(0);" data-skin="skin-yellow-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span>
			</div>
			<div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
			</div>
		</a>
		<p class="text-center no-margin" style="font-size: 12px;">黄-白</p>
	</li>
</ul>
          </div>
        </div>
      </aside><!-- /.control-sidebar -->
      	
      	
<script>
(function(){
    var changeSkin = function(skin){
    	var my_skins = [
		    "skin-blue",
		    "skin-black",
		    "skin-red",
		    "skin-yellow",
		    "skin-purple",
		    "skin-green",
		    "skin-blue-light",
		    "skin-black-light",
		    "skin-red-light",
		    "skin-yellow-light",
		    "skin-purple-light",
		    "skin-green-light"
	    ];
	    $.each(my_skins, function (i) {
	      $("body").removeClass(my_skins[i]);
	    });
	    $("body").addClass(skin);
    }
  
	$('#control-sidebar-settings-tab [data-skin]').click(function(){
		var skin = $(this).attr('data-skin');
		changeSkin(skin);
	    localStorage.setItem("_skin", skin);
	});
	skin = localStorage.getItem("_skin");
	if(skin) {
		changeSkin(skin);
	}
})();
</script>
